import { useState, useEffect, useCallback } from 'react'

const useSize: any = (target: any) => {
    const [state, setState] = useState({
        width: 0,
        height: 0
    });

    const getTargetElement = useCallback((target: any, defaultElement = window) => {
        if (!target) {
            return defaultElement
        }

        let targetElement;

        if (typeof target === 'function') {
            targetElement = target()
        } else if ('current' in target) {
            if (target.current) {
                targetElement = target.current
            } else {
                return defaultElement
            }
        } else {
            targetElement = target
        }

        return targetElement
    }, [])

    useEffect(() => {
        const targetElement = getTargetElement(target)
        if (!targetElement) {
            return
        }

        const observer = new window.ResizeObserver(function elResizeChange(entries) {
            // 每次被观测的元素尺寸发生改变这里都会执行
            entries.forEach((entry) => {
                const { width, height } = entry.target.getBoundingClientRect()
                setState({
                    width: width,
                    height: height,
                });
            });
        })

        observer.observe(targetElement) // 观测DOM元素

        return () => {
            observer.disconnect()
        }
    }, [target])

    return {
        ...state
    }
}

export default useSize